<template>
	<view>
		<view class="content">
			<view class="title">
				<view class="tit">完善你的信息</view>
				<view class="yuan"></view>
			</view>
			<view class="uimg">
				<button :plain="true" class="btn_ads" open-type="chooseAvatar" @chooseavatar='chooseavatar'></button>
				<image class="imgs" :src="userinfo.headImg?userinfo.headImg:'/static/toux.png'" mode=""></image>
				<image class="uicon" src="/static/user/x.png" mode=""></image>
			</view>

			<view class="items">
				<view class="item_l">昵称</view>
				<view class="item_r" @click="pagesetNickname">
					<view class="act"
					:style="{color:userinfo.nickName?'#000':'#D1CDCD'}"
					>{{userinfo.nickName?userinfo.nickName:'请选择'}}</view>
					<uni-icons type="right" size='16'></uni-icons>
				</view>
			</view>
			<view class="items">
				<view class="item_l">手机号</view>
				<view class="item_r">
					<view class="">{{userinfo.phone}}</view>
				</view>
			</view>
		</view>
		<view class="time">
			<view class="items">
				<view class="item_l">加入时长</view>
				<view class="item_r">
					<view class="">加入伊可库<span>{{userinfo.registerDay}}</span>天</view>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="title">
				<view class="tit">个人资料</view>
				<view class="yuan"></view>
			</view>
			<view class="" style="height: 100rpx;"></view>
			<view class="items">
				<view class="item_l">生日<span>(选填)</span></view>
				<picker mode="date" :value="uinfo.birthday" :start="startDate" :end="endDate" 
				@change="bindDateChange($event,'birthday')">
					<view class="item_r">
						<view class="act"
						:style="{color:uinfo.birthday?'#000':'#D1CDCD'}"
						>{{uinfo.birthday?uinfo.birthday:"请选择 "}}</view>
						<uni-icons type="right" size='16'></uni-icons>
					</view>
				</picker>
			</view>
			<view class="items">
				<view class="item_l">职业<span>(选填)</span></view>
				<view class="item_r" @click="pagesetUserinfo('career','self_user_career_list')">
					<view class="act"
					:style="{color:uinfo.career?'#000':'#D1CDCD'}"
					>{{uinfo.career?uinfo.career:"请选择 "}}</view>
					<uni-icons type="right" size='16'></uni-icons>
				</view>
			</view>
			<view class="items">
				<view class="item_l">性别<span>(选填)</span></view>
				<picker :range="genderList" range-key='dictLabel' :value="uinfo.gender" @change="bindDateChange($event,'gender')">
					<view class="item_r">
						<view class="act"
						:style="{color:uinfo.gender?'#000':'#D1CDCD'}"
						>{{genderList[uinfo.gender].dictLabel?genderList[uinfo.gender].dictLabel:"请选择 "}}</view>
						<uni-icons type="right" size='16'></uni-icons>
					</view>
				</picker>

			</view>
			<view class="items">
				<view class="item_l">注册来源<span>(选填)</span></view>
				<view class="item_r" @click="pagesetUserinfo('source','self_user_source_list')">
					<view class="act"
					:style="{color:uinfo.source?'#000':'#D1CDCD'}"
					>{{uinfo.source?uinfo.source:"请选择 "}}</view>
					<uni-icons type="right" size='16'></uni-icons>
				</view>
			</view>
			<view class="items">
				<view class="item_l">学历<span>(选填)</span></view>
				<picker :range="educationList" range-key='dictLabel' :value="educationValue" @change="bindDateChange($event,'education')">
					<view class="item_r">
						<view class="act"
						:style="{color:uinfo.education?'#000':'#D1CDCD'}"
						>{{uinfo.education?uinfo.education:"请选择 "}}</view>
						<uni-icons type="right" size='16'></uni-icons>
					</view>
				</picker>
			</view>
			<view class="items">
				<view class="item_l">兴趣爱好<span>(选填)</span></view>
				<view class="item_r" @click="pagesetUserinfo('hobby','self_user_hobby_list')">
					<view class="act"
					:style="{color:uinfo.hobby?'#000':'#D1CDCD'}"
					>{{uinfo.hobby?uinfo.hobby:"请选择 "}}</view>
					<uni-icons type="right" size='16'></uni-icons>
				</view>
			</view>
		</view>
		<view class="" v-if="true">

		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,UserInfoUpdate,getExtend,ExtendUpdate,getdict
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				date: '',
				
				userinfo: {},
				uinfo:{},
				genderList:[],
				educationList:[],
				educationValue:0
			};
		},
		onShow() {
			this.getinfo()
			getExtend({}).then(res=>{
				this.uinfo = res.data
				getdict("sys_user_sex").then(res=>{
					this.genderList = res.data
				})
				getdict("self_user_education_list").then(res=>{
					this.educationList = res.data
					this.educationValue = this.educationList.findIndex( item=>{ return item.dictLabel == this.uinfo.education})
				})
			})
			
		},
		methods: {
			getinfo(){
				getUserInfo({}).then(res => {
					this.userinfo = res.data
				}) 
			},
			//更换头像
			chooseavatar(e) {
				uni.uploadFile({
					url: getApp().globalData.BASEURL+'/common/upload', // 后台上传接口
					filePath: e.detail.avatarUrl, // 上传图片 url
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data',
						'Authorization': uni.getStorageSync('userToken')
					},
					success: (res) => {
						let reject = JSON.parse(res.data)
						UserInfoUpdate({headImg:reject.url}).then(r=>{
							this.getinfo()
						})
					}
				});
			},
			pagesetUserinfo(type,dict) {
				console.log(this.uinfo[type]);
				uni.navigateTo({
					url: `/mypage/setUserinfo?type=${type}&&dict=${dict}&&nowtype=${this.uinfo[type]}`
				})
			},
			//
			bindDateChange(e,type) {
				if(type == 'birthday'){
					this.uinfo.birthday = e.detail.value
				}else if(type == 'gender'){
					this.uinfo.gender = e.detail.value
				}else{
					this.uinfo.education = this.educationList[e.detail.value].dictLabel
				}
				ExtendUpdate({
					[type]:this.uinfo[type]
				}).then(res=>{console.log(res);})
			},
			pagesetNickname() {
				uni.navigateTo({
					url:`/mypage/setNickname?name=${this.userinfo.nickName}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FBFBFB;
	}

	.content {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 24rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 52rpx;
			color: #000000;
			position: relative;

			.tit {
				z-index: 9;
				position: absolute;
			}

			.yuan {
				top: -11rpx;
				position: absolute;
				width: 66rpx;
				height: 66rpx;
				background-color: #29A85C;
				border-radius: 33rpx;
			}
		}

		.uimg {
			width: 160rpx;
			height: 160rpx;
			background: #F3F3F3;
			border-radius: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 100rpx auto 50rpx;
			position: relative;

			image {
				width: 116rpx;
				height: 116rpx;
			}

			.imgs {
				width: 160rpx;
				height: 160rpx;
				border-radius: 80rpx;
			}

			.btn_ads {
				position: absolute;
				width: 160rpx;
				height: 160rpx;
				border: none;
			}

			.uicon {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				right: 0%;
				bottom: 0%;
			}
		}

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 50rpx;

			.item_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

				span {
					color: #D1CDCD !important;
				}
			}

			.item_r {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				// color: #D1CDCD;
				color: #000000;

				.act {
					color: #D1CDCD;
				}
			}
		}
	}

	.time {
		width: 710rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 auto;
		padding: 0rpx 20rpx;
		box-sizing: border-box;

		.items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;

			.item_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;

			}

			.item_r {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				// color: #D1CDCD;
				color: #000000;

				span {
					font-family: 'DINB';
					font-size: 40rpx;
				}

				.act {
					color: #D1CDCD !important;
				}

			}
		}
	}
</style>